<template>
    <div class="icontent">
        <div class="logincontent">
            <h3>Rgeister 注册</h3>
            <input type="text" v-model="login_form.username" placeholder="请输入手机号或邮箱(Email/Mobile)">
            <input type="password" v-model="login_form.password" placeholder="请输入密码(Password)">
            <input type="text" v-model="login_form.captcha" placeholder="请输入验证码(Captcha)">
            <div class="loginb_div">
                <div class="loginb" @click="backb($event)">Back 返回</div>
                <div class="registerb" @click="register($event)">Rgeister 注册</div>
            </div>
        </div>
    </div>
</template>

<script>
    import { login, getInfo, register } from '@/api/login'
    import store from '@/store'
    import Vue from 'vue'

    export default {
        name: "register",
        data () {
            return {
                login_form: {
                    username: '',
                    password: '',
                    captcha: ''},
            }
        },
        methods: {
            register(e) {
                // this.$router.push({ name: 'cousermanager', params: { pagenum: pagenum }})
                // this.$router.push({ name: 'groupwork'})
                if (this.login_form.username === '' || this.login_form.password === '' || this.login_form.captcha === '') {
                    alert('用户名或密码或验证码不能为空！')
                } else {
                    register(this.login_form.username,this.login_form.password,this.login_form.captcha).then(response => {
                        const data = response.data
                        console.log(data)
                        console.log('成功')
                        this.$router.push({ name: 'login'})
                    }).catch(error => {
                        // console.log('错误')
                        // console.log(error)
                        var error_message = error
                        switch (error_message) {
                            case '用户不存在':
                                alert('用户不存在')
                                break
                            case '密码错误':
                                alert('密码错误')
                                break
                            case '手机号格式错误':
                                alert('手机号格式错误')
                                break
                            default:
                                alert(error_message)
                            }
                    })
                }
            },
            backb () {
                this.$router.push({ name: 'login'})
            }
        },
        created: function() {
            
        }
    }
</script>

<style scoped>
    .icontent{
        width: 90%;
        height: 100%;
        margin: 0 5% 0 5%;
        overflow: hidden;
    }
    .logincontent{
        width: 90%;
        height: 100%;
        margin: 50px 5% 0 5%;
        overflow: hidden;
        text-align: center;
    }
    .logincontent input{
        text-align: center;
        display: block;
        width: 400px;
        height: 35px;
        padding: 3px;
        margin: 20px calc(50% - 200px) 20px calc(50% - 200px);
        background:none;  
        outline:none;  
        border:0px;
        border-bottom: 2px solid #dcdcdc;
        border-bottom-left-radius: 1px;
        border-bottom-right-radius: 1px;
        box-sizing: border-box;
        font-family: PingFangSC-Regular;
        font-size: 16px;
    }
    .logincontent input:focus{
        border-bottom: 2px solid #0F996B;
        border-bottom-left-radius: 1px;
        border-bottom-right-radius: 1px;
    }
    .loginb_div{
        overflow: hidden;
        margin: 20px calc(50% - 200px) 20px calc(50% - 200px);
        width: 400px;
    }
    .loginb{
        float: left;
        width: 190px;
        height: 40px;
        line-height: 40px;
        background-color: rgb(7, 187, 127);
        border-radius: 5px;
        font-size: 18px;
        font-family: PingFangSC-Regular;
        color: #ffffff;
    }
    .loginb:active{
        background-color: #0F996B;
    }
    .loginb:hover{
        cursor: pointer;
    }
    .registerb{
        float: right;
        width: 190px;
        height: 40px;
        line-height: 40px;
        background-color: rgb(7, 187, 127);
        border-radius: 5px;
        font-size: 18px;
        font-family: PingFangSC-Regular;
        color: #ffffff;
    }
    .registerb:active{
        background-color: #0F996B;
    }
    .registerb:hover{
        cursor: pointer;
    }
</style>